<template>
   <div>
        <ul class="btn_list">
            <li @click.stop="cameraToTarget(true)">
                <p>漫游模式</p>
                <img class="btn_bg" src="../assets/btn1.png" alt="">
            </li>
            <li @click.stop="cameraToTarget(false)">
                <p>全景观看</p>
                <img class="btn_bg" src="../assets/btn3.png" alt="">
            </li>
            <li @click.stop="changeWeather('day')">
                <p>切换白天</p>
                <img class="btn_bg" src="../assets/btn4.png" alt="">
            </li>
             <li @click.stop="changeWeather('night')">
                <p>切换夜晚</p>
                <img class="btn_bg" src="../assets/btn4.png" alt="">
            </li>
        </ul>
   </div>
</template>

<script setup>
import { ref } from "vue";

import { store } from "../store/config.js";


import emitter from '../mitt/index.js';
import { ThreeSceneEvent } from '../mitt/eventType';

let posDeviceIsShow = ref(true);

function changeWeather(status)
{
    emitter.emit(ThreeSceneEvent.changeWeather,status);
}

function posDeviceStatusChange()
{
    posDeviceIsShow = !posDeviceIsShow;
    deviceFileChange("posIcon_",posDeviceIsShow);
}

function cameraToTarget(status)
{
    
    emitter.emit(ThreeSceneEvent.cameraToTarget,status);
}




</script>
<style  scoped>
    .content{
        width: 100%;
        height: 100%;
        background-color: rgba(100, 160, 12, 0.2);
    }   
    .top_box{
        position:absolute;
        top: -230px;
    }
    .storeList{
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: row wrap;
        flex-direction: row;
        align-items: center;
        text-align: center;
        padding: 0%;
        margin: 0px;
    }

    .storeList > li{
        flex-grow: 1;
        padding: 2px 5px;
        list-style: none;
        position: relative;
        text-align: center;
        border:1px solid #fff;
        border-radius: 3px;
        background-color: rgba(0, 0, 0, 0.4);
        color: white;
        margin: 4px;
    }



    .btn_list{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: center;
        padding: 0%;
        margin: 0px;
    }
    .btn_list > li{
        flex-grow: 1;
        padding: 2px 5px;
        list-style: none;
        margin: 0px 35px;
        position: relative;
    }
    .btn_list p{
        margin-top: 60%;
        color: white;
    }
    .btn_list .btn_bg{
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: auto;
    }
</style>